<template>
	<view>
		<view class="header">
		</view>
		<view class="navBox">
			<image class="backBtn" @click="goBack" src="http://cdn.yic3.cn/lawyer/mp-xhs/mine/backIcon.png"
				mode="widthFix"></image>
			<p>合同目录</p>
		</view>
		<view class="seachBox">
			<image src="http://cdn.yic3.cn/lawyer/mp-xhs/contract/icon5.png" mode="widthFix"></image>
			<input type="text" placeholder="请输入关键词" placeholder-style="color:#999999;font-size:28rpx" v-model="keyword"
				@confirm="searchInput" />
		</view>
		<z-paging ref="contractPaging" refresher-theme-style="white" :show-refresher-update-time="true"
			v-model="contractList" @query="queryContract" :auto="false">
			<view class="contractList">
				<view class="listItem" v-for="(item,index) in contractList" :key="index" @click="open(item)">
					<p>{{item.name}}</p>
					<p>{{item.fileSize}}</p>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				contractList: [],
				contractId: '',
			};
		},
		onLoad(e) {
			this.contractId = e.id
		},
		onReady() {
			this.$refs.contractPaging.reload()
		},
		methods: {
			queryContract(page, size) {
				this.$api.getContractFile({
					page,
					size,
					keyword: this.keyword,
					contractId: this.contractId,
				}).then(res => {
					if (res.data.code == 0) {
						this.$refs.contractPaging.complete(res.data.data.items)
					}
				})
			},
			// 搜索
			searchInput() {
				this.$refs.contractPaging.reload()
			},
			open(e) {
				if(!this.isVip())return uni.navigateTo({
					url:'/packageA/pages/vipCenter/vipCenter'
				})
				if(this.isBindPhone()) return false
				uni.showLoading({
					title:'加载中...'
				})
				uni.downloadFile({
					url: e.fileUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.hideLoading()
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					},
					fail(err) {
						console.log(err)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import 'contractCatalogue.scss'
</style>